<template>
    <div class="jianzhan-content">
        <Crumb name="系统模块设置"></Crumb>
        <div class="search">
            <el-button type="primary" icon="el-icon-plus" style="margin: 10px 0;float: left" @click="dialogVisible = true">增加系统模块</el-button>
        </div>
        <div class="content">
            <div class="table-wrapper">
                <el-table
                        row-key="id"
                        border
                        stripe
                        :data="processList"
                        style="width: 100%">
                    <el-table-column
                            prop="moduleName"
                            label="流程名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                    >
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="openEdit(scope.row)" icon="el-icon-edit">查看编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
                title="模块"
                :visible.sync="dialogVisible"
                width="30%"
                >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="模块名称">
                    <el-input v-model="form.moduleName" placeholder="模块名称"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import {addSysModule,getModuleList,modSysModule} from "../../api/auth";
    import {ERROR_OK} from "../../util/config";
    export default {
        name: "approve-process",
        components:{
            Crumb
        },
        data(){
            return {
                dialogVisible:false,
                processList:[],
                form:{
                    moduleName:'',
                    id:''
                }
            }
        },
        created(){
            this.getModuleList();
        },
        methods: {
            async getModuleList(){
                const {status,data,msg} = await getModuleList();
                if (status === ERROR_OK) {
                    this.processList = data;
                } else {
                    this.$message.error(msg);
                }
            },
            async submitForm() {
                if(this.form.moduleName) {
                    const {id,moduleName} = this.form;
                   if(this.form.id) {
                       const {status} = await modSysModule(id,moduleName);
                       if (status ===  ERROR_OK) {
                           this.$message.success('修改成功');
                           this.getModuleList();
                           this.close();
                       }
                   } else {
                       const {status} = await addSysModule(moduleName);
                       if (status === ERROR_OK) {
                           this.$message.success('新增成功');
                           this.getModuleList();
                           this.close();
                       }
                   }
                }
            },
            close() {
                this.dialogVisible = false;
                this.clear();
            },
            clear(){
                this.form = {
                    id:'',
                    moduleName:''
                }
            },
            openEdit(row) {
                this.form = row;
                this.dialogVisible = true;
            }
        },
    }
</script>

<style scoped lang="scss">
@import "../../css/mixins";
    .content{
        @include content
    }
</style>